<!--
 * @Author: Kevintian
 * @LastEditors: Kevintian
 * @Description: 运费险组件及运费险弹出框
 * @Date: 2024-10-11 17:11:52
 * @LastEditTime: 2024-10-11 17:11:52
-->
<template>
  <div class="delivery-dialog">
    <div class="delivery-wrap" @click="show = true">
      <div class="delivery-cell">
        <!-- <span class="title">退货包运费</span> -->
        <!-- <span class="tag">运费险</span> -->
        <span class="EC1">退货包运费</span>
      </div>
      <div style="color:#ccc;font-size: 0.28rem;">商家赠送 <i class="iconfont icon-zhixiang" style="color:#ccc;"></i></div>

    </div>
     <div class="delivery-action">
       <van-action-sheet v-model="show" title="退货包运费">
        <div class="delivery-type">
          <div class="infoitems">
            商家为你购买的商品提供退货包运费服务，退货成功后可补贴运费，0元单和兑换订单不赠送运费险服务，实际赠送情况以订单详情页为主
          </div>
        </div>
        <div class="onknow theme-customize-bg" @click="show = false">我知道了</div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import Vue from 'vue';
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);

export default {
	name:'deliveryDialog',
	data() {
		return {
		show: false,
		};
	},
	computed: {
		...mapState("goods_detail", ["distributionMode","baseInfo"]),
		...mapState("goods_detail/goods_commerce", ["package_delivery"]),
		...mapState("goods_detail/footer_button", ["userCanPick"]),
    ...mapState({
      isIntegral: (state) => state.isIntegral,
      list: (state) => state.goods_detail.sku_selector.sku.list    // sku列表
    }),
    isCOPGoods(){
      return this.baseInfo.spu_type === "COP"
    },
		showKuaiDi(){
			return  this.distributionMode === -1 || this.distributionMode === 1 || this.package_delivery===-1 || this.package_delivery ===1
		},
		showPickSelf(){
			return this.userCanPick === 1 && (this.distributionMode === -1 || this.distributionMode === 2 || this.package_delivery===-1 || this.package_delivery ===2)
		},
  },
};
</script>

<style lang="scss" scoped>
.delivery-dialog {
  .delivery-wrap {
    background-color: white;
    padding: .32rem;
    display: flex;
    justify-content: space-between;
    color: #999999;
    margin-top: 0.16rem;
    .delivery-cell {
      display: flex;
      align-items: center;
       .title {
         margin-right: 8px;
       }
       .tag{
    padding: 0.02rem .08rem;
    background-color: #FFF3EB;
    margin-right: .16rem;
    color: #FF781F;
    border-radius: 0.04rem;
    font-size: .2rem;
  }
       .EC1{
         color: #333;
         margin-right: 0.16rem;
         font-size: 0.28rem;
       }
    }
    .icon-zhixiang{
      font-size: .24rem;
    }
  }
  .delivery-action{
    .delivery-type {
      padding-bottom: 1.6rem;
      .infoitems {
        // line-height: 1.2rem;
        padding: 0 0.32rem;
      }
    }
    .onknow{
    width: 90%;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    color: #fff;
    border-radius: 0.4rem;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    }
  }
}
</style>
